<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			table {
				border-collapse: collapse;
			}
			td {
				padding: 8px 12px;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>1-1</td>
				<td>2-1</td>
				<td>3-1</td>
				<td>4-1</td>
			</tr>
			<tr>
				<td>1-2</td>
				<td>2-2</td>
				<td>3-2</td>
				<td>4-2</td>
			</tr>
			<tr>
				<td>1-3</td>
				<td>2-3</td>
				<td>3-3</td>
				<td>4-3</td>
			</tr>
			<tr>
				<td>1-4</td>
				<td>2-4</td>
				<td>3-4</td>
				<td>4-4</td>
			</tr>
		</table>

		<script>
			var tableEl = document.body.firstElementChild // as HTMLTableElement

			/* var row1El = tableEl.rows[0]
			var cell1El = row1El.cells[0]
			cell1El.style.backgroundColor = 'red'
			cell1El.style.color = '#fff'

			console.log(cell1El) */

			for (var i = 0; i < tableEl.rows.length; i++) {
				var rowEl = tableEl.rows[i]
				var cellEl = rowEl.cells[i]

				cellEl.style.backgroundColor = 'red'
				cellEl.style.color = '#fff'
			}
		</script>
	</body>
</html>
